<template>
  <div class="app-container">
    <el-alert
      :title="
        list.state == 1
          ? '租赁中'
          : list.state == 2
          ? '已退租'
          : '租赁合同签订中'
      "
      :type="
        list.state == 1 ? 'success' : list.state == 2 ? 'error' : 'warning'
      "
      effect="dark"
      :closable="false"
      center
    >
    </el-alert>

    <div style="margin-top: 1%">
      <el-descriptions
        class="margin-top"
        title="租赁信息"
        :column="3"
        size="small"
        border
      >
        <template slot="extra">
          <el-button type="primary" size="small">编辑</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            园区
          </template>
          {{ list.room.building.park.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            楼宇
          </template>
          {{ list.room.building.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            房间
          </template>
          {{ list.room.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            企业名称
          </template>
          {{ list.enterprise != undefined ? list.enterprise.name : "暂无" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            租赁人
          </template>
          {{ list.user.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            类别
          </template>
          {{ list.type == 1 ? "个人" : "企业" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            租赁计费面积
          </template>
          {{ list.leaseArea }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            签订租金
          </template>
          {{ list.rent }} {{ list.rentType == 1 ? "元/m²/月" : "元/月" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            租金支付方式
          </template>
          {{
            list.rentPayType == 1
              ? "月付"
              : list.rentPayType == 2
              ? "季付"
              : list.rentPayType == 3
              ? "半年付"
              : "年付"
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            签订物业费
          </template>
          {{ list.maintenance }}
          {{ list.maintenanceType == 1 ? "元/m²/月" : "元/月" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            物业费支付方式
          </template>
          {{
            list.maintenancePayType == 1
              ? "月付"
              : list.rentPayType == 2
              ? "季付"
              : list.rentPayType == 3
              ? "半年付"
              : "年付"
          }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            押金
          </template>
          {{ list.deposit }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            租赁时间
          </template>
          {{ list.startDate | formatYmd }} 止 {{ list.endDate | formatYmd }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            租金免租时间
          </template>
          {{ list.freeStartDate }} {{ list.freeEndDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            物业免租期
          </template>
          {{ list.maintenanceFreeStartDate }} {{ list.maintenanceFreeEndDate }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            企业折扣停车费
          </template>
          {{ list.parkingFee }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            企业折扣停车位个数
          </template>
          {{ list.parkingFeeNumber }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            免费停车位个数
          </template>
          {{ list.freeParkingPlace }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            剩余免费停车位个数
          </template>
          {{ list.residueFreeParkingPlace }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            剩余折扣停车位个数
          </template>
          {{ list.residueParkingFeeNumber }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            免租期月数
          </template>
          {{ list.freeLeaseNumber }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            性质
          </template>
          {{
            list.enterprise != undefined
              ? list.enterprise.nature == 1
                ? "自营"
                : "托管"
              : "暂无"
          }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            水电
          </template>
          {{ list.waterRate }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            备注
          </template>
          {{ list.remarks }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            备注
          </template>
          {{ list.risesProportion }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            备注
          </template>
          {{ list.customRule }}
        </el-descriptions-item>
      </el-descriptions>

      <el-alert
        title="租金递增规则"
        type="success"
        :closable="false"
        description="是否同比递增 是 递增方式：每年 递增 2.5%"
        style="margin-top: 1%"
      >
      </el-alert>

      <el-alert
        title="车辆信息"
        type="success"
        :closable="false"
        description=""
        style="margin-top: 1%"
      >
      </el-alert>

      <el-tag
        v-for="(item, index) in list.vehicleList"
        :key="index"
        style="margin-top: 1%"
      >
        {{ item.number }}-{{ item.state ? "正常" : "已停用" }}
      </el-tag>
      <el-alert
        title="费用名称"
        type="warning"
        :closable="false"
        style="margin-top: 0.5%"
      >
      </el-alert>
      <template slot="extra">
        <el-button type="primary" size="small">编辑</el-button>
      </template>
      <el-button type="primary" size="mini" @click="HandlerAdd()"
        >添加费用</el-button
      >
      <el-button type="primary" size="mini" @click="HandlerSdAdd()"
        >添加水电费</el-button
      >
      <el-table
        :data="list.payList"
        style="width: 100%; margin-top: 0.5%"
        border
      >
        <el-table-column
          prop="prcName"
          label="费用项目"          
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          label="单价"
          align="center"         
        >
        </el-table-column>
        <el-table-column
          prop="degrees"
          label="度数/面积/车数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="biliel"
          label="增长比列"
          align="center"
        >
        </el-table-column>       
        <el-table-column prop="startDate" align="center" label="开始时间">
          <template slot-scope="scope">
            {{ scope.row.startDate | formatYmd }}
          </template>
        </el-table-column>
        <el-table-column prop="endDate" align="center" label="截止时间">
          <template slot-scope="scope">
            {{ scope.row.endDate | formatYmd }}
          </template>
        </el-table-column>
        <el-table-column prop="issueNumber" align="center" label="期数">
        </el-table-column>
        <el-table-column align="center" label="缴费状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.payStatus == 0" type="success" size="mini">
              已缴费
            </el-tag>
            <el-tag v-if="scope.row.payStatus == 1" size="mini" type="danger">
              未缴纳
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="费用" align="center" width="180">           
        </el-table-column>
        <el-table-column prop="taxPrice" align="center" label="税费">
        </el-table-column>
        <el-table-column prop="totalPrice" align="center" label="总计">
        </el-table-column>
        <el-table-column prop="remarks" align="center" label="备注" width="200">
        </el-table-column> 
      </el-table>
      <div
        style="
          width: 100%;
          line-height: 30px;
          text-align: right;
          border: 1px solid #ebeef5;
          border-top: 0px;
          padding: 10px 0px;
          padding-right: 1%;
        "
      >
        共计：<span
          style="font-size: 16px; font-weight: bold; color: #409eff"
          >{{ list.countPrice }}</span
        >
      </div>

      <el-button type="primary" size="mini" @click="HandlerQuery()"
        >查询所有费用</el-button
      >
      <el-alert
        title="费用名称"
        type="warning"
        :closable="false"
        style="margin-top: 0.5%"
      >
      </el-alert>

      <el-table :data="prc_list" style="width: 100%; margin-top: 0.5%" border>
        <el-table-column
          prop="prcName"
          label="费用项目"
          width="180"
          align="center"
        >
        </el-table-column>

        <!-- <el-table-column prop="price" label="金额" align="center" width="180">
          
        </el-table-column> -->

        <el-table-column
          prop="unitPrice"
          label="单价"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="degrees"
          label="度数/面积/车数"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="biliel"
          label="增长比比列"
          align="center"
          width="180"
        >
        </el-table-column>

        <el-table-column prop="price" label="金额" align="center" width="180">
          <template slot-scope="scope">
            {{ (scope.row.degrees * scope.row.unitPrice).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="startDate" align="center" label="开始时间">
          <template slot-scope="scope">
            {{ scope.row.startDate | formatYmd }}
          </template>
        </el-table-column>
        <el-table-column prop="endDate" align="center" label="截止时间">
          <template slot-scope="scope">
            {{ scope.row.endDate | formatYmd }}
          </template>
        </el-table-column>
        <el-table-column prop="issueNumber" align="center" label="期数">
        </el-table-column>
        <el-table-column align="center" label="缴费状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.payStatus == 0" type="success" size="mini">
              已缴费
            </el-tag>
            <el-tag v-if="scope.row.payStatus == 1" size="mini" type="danger">
              未缴纳
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" align="center" label="备注">
        </el-table-column>
      </el-table>
      <div
        style="
          width: 100%;
          line-height: 30px;
          text-align: right;
          border: 1px solid #ebeef5;
          border-top: 0px;
          padding: 10px 0px;
          padding-right: 1%;
        "
      >
        共计：<span
          style="font-size: 16px; font-weight: bold; color: #409eff"
          >{{ list.countPrice }}</span
        >
      </div>
      <!-- <div style="margin-top: 10px">
        <vue-qr
          :correctLevel="3"
          :autoColor="false"
          colorDark="#313a90"
          :logoSrc="logoSrc"
          :text="codeUrl"
          :size="180"
          :margin="10"
          :logoMargin="3"
        >
        </vue-qr>

      
        <el-button @click="setCurrent()" size="mini">生成支付码</el-button>

        <div
          class="qr_mask"
          @click="refreshCodeTap"
          v-if="parseInt(list.countPrice) == 0"
        >
          <i class="refresh el-icon-refresh"></i>
          <p>请点击刷新重新获取二维码</p>
        </div>
      </div>    -->
      <!-- <el-divider content-position="left">工单信息</el-divider>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="费用说明" width="180">
          </el-table-column>
          <el-table-column prop="name" label="金额" width="180">
          </el-table-column>
          <el-table-column prop="address" label="缴费状态"> </el-table-column>
          <el-table-column prop="time" label="开始时间"> </el-table-column>
          <el-table-column prop="endtime" label="截止时间"> </el-table-column>
          <el-table-column prop="address" label="备注"> </el-table-column>
        </el-table>
      </div> -->
    </div>
  </div>
</template>
    
    <script>
import {
  getLeaseDetails,
  getLeasePriceTypeId,
  saveLeasePrice,
} from "@/api/lease";
import {
  saveMeterReading
} from "@/api/commonapi";
import VueQr from "vue-qr";
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      isShowPayPopup: false,
      bgSrc: "",
      logoSrc: require("@/assets/images/logo.png"),
      codeUrl: "weixin://wxpay/bizpayurl?pr=TEoxYn0zz",
      countDownSecond: 1,
      tableData: [
        {
          date: "房屋押金",
          name: "10000",
          time: "2025-09-01",
          sm: "",
          endtime: "2025-09-30",
          state: 0,
        },
        {
          date: "房屋租金",
          name: "14500",
          time: "2025-09-01",
          sm: "65 元/m²/月 * 面积 200",
          endtime: "2025-09-30",
          state: 0,
          remarks: "每月 递增 2.5%",
        },
        {
          date: "房屋水费",
          name: "25",
          state: 0,
          price: 4.36,
          degree: "20",
          sm: " 4.60 * 20",
          time: "2025-09-01",
          endtime: "2025-09-30",
        },
        {
          date: "房屋电费",
          name: "1000",
          state: 1,
          price: 1.5,
          degree: "100",
          sm: "5 元/m²/月 * 面积 200",
          time: "2025-09-01",
          endtime: "2025-09-30",
        },
        {
          date: "房屋物业",
          name: "78",
          state: 1,
          sm: "5 元/m²/月 * 面积 200",
          time: "2025-09-01",
          endtime: "2025-09-30",
        },

        {
          date: "停车费",
          name: "60",
          state: 1,
          sm: "",
          time: "2025-09-01",
          endtime: "2025-09-30",
        },
        {
          date: "维修费",
          name: "120",
          state: 1,
          sm: "",
          time: "2025-09-01",
          endtime: "2025-09-30",
        },
        {
          date: "其他费用",
          name: "120",
          state: 1,
          sm: "",
          time: "2025-09-01",
          endtime: "2025-09-30",
        },
      ],
      prc_list: [],
      prc: {
        leaseId: 225,
        prcType: 5, // 费用类型 1 房租 2 物业 3 水费 4 电费  5 押金 6 停车 7 意向金额 8 其他费用
        prcName: "房屋押金",
        price: 4.36,
        startDate: "2025-09-01",
        endDate: "2025-09-30",
        payStatus: 1,
        degrees: 20,
        unitPrice: 5,
        biliel: 200,
        issueNumber: 1,
        isDiscount: 1,
        discountBiliel: 1,
        remarks: "每月 递增 2.5%",
        lastDegrees: 0,
      },
      lid: null,
    };
  },
  components: {
    VueQr,
  },
  created() {
    console.log(this.$route.query);
    this.fetchData(this.$route.query.id);
    this.lid = this.$route.query.id;
    this.prc.leaseId = this.lid;
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getLeaseDetails(obj).then((response) => {
        this.listLoading = false;
        this.list = response.data;
        // risesProportion
        this.list.risesProportion=JSON.parse(this.list.risesProportion);
        this.list.customRule=JSON.parse(this.list.customRule);
        console.log(this.list);
      });
    },
    setCurrent() {
      this.$refs.table.setCurrentRow(this.tableData[1]);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = " ";
        }
      });

      return sums;
    },

    HandlerAdd() {
      saveLeasePrice(this.prc).then((response) => {
        this.listLoading = false;
        this.prc_list = response.data;
        this.fetchData(this.lid);
      });
    },
    HandlerSdAdd(){
      this.listLoading = true;
      var data = {
        leaseId: 19, // 设备号id
        dus: 134,
        types: 4,
      };
      saveMeterReading(data.leaseId,data.dus,data.types).then((response) => {
        this.listLoading = false;
        this.$message('生成账单成功');     
      });
    },
    HandlerQuery() {
      this.listLoading = true;
      getLeasePriceTypeId(this.lid).then((response) => {
        this.listLoading = false;
        this.prc_list = response.data;
      });
    },

    refreshCodeTap() {},
  },
};
</script>
  <style scoped>
.el-descriptions__header {
  margin-bottom: 0px;
}
</style>
    